<template>
  <div class="MyTrip">
    <div class="content">
      <div class="nav">
        <el-page-header class="nav-page" @back="goBack">
          <template #title>
            <span class="text-large font-600 mr-3 nav-content"> </span>
          </template>
          <template #content>
            <span class="text-large font-600 mr-3 nav-content"> 我的行程 </span>
          </template>
        </el-page-header>
      </div>
      <div class="main">
        <el-card v-for="(item, index) in TripData" :key="index" class="trip-card" body-class="card-body">
          <el-descriptions :column="columnCount" :border="false" class="des-content">
            <el-descriptions-item label="行程路线" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%">
              <span>
                 {{ item.route }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="出发时间" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%">
              <span>
                {{ item.startDate }} {{ item.startTime }}
              </span></el-descriptions-item>
            <el-descriptions-item label="乘坐人数" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%">
              <span v-if="item.accepted">
                已拼 {{ item.adcVehicleTrip.num_passengers }}
                人 / 共 {{
                  item.adcVehicleTrip.max_seat_capacity }} 座
              </span>
              <span v-if="!item.accepted">
                本单 {{ item.passengerTripNumPassengers }} 人
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="票价" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%">
              <span>
                {{ item.price }} 元 / 位
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="我的位置" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%"> {{ item.startLocationName }}
            </el-descriptions-item>
            <el-descriptions-item label="状态" label-align="left" align="left" label-class-name="my-label"
                                  class-name="my-content" width="50%">
              <span v-if="item.accepted">
                <span class="accepted">
                  司机已接单
                </span>
                <span class="trip-status">
                  {{ item.status }}
                </span>
              </span>
              <span v-if="!item.accepted">
                <span class="accepted">
                  等待接单
                </span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </div>

  </div>
</template>
<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref  } from "vue";
import { UserDataStore } from "../store/user";
import { useRoute, useRouter } from 'vue-router';
import axios from "../utils/request";
onMounted(() => {
  storeData();
  getData();
  nextTick(() => {
    getSize();
    window.addEventListener('resize', getSize);
  })
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', getSize);
});
let x = ref();
let y = ref();
let columnCount=computed(()=>{
  if(x.value>=600){
    return 2;
  }
  else{
    return 1;
  }
});
const route = useRoute();
const router = useRouter();
var store = {};
var TripData = ref([]);
var DataLength = computed(() => TripData.value.length);

function getSize() {
  x.value = document.getElementById('app').clientWidth;
  y.value = document.getElementById('app').clientHeight;
}

function storeData() {
  store = UserDataStore();
  let userData = localStorage.getItem("user");
  const trimmedStr = userData.replace(/\s/g, '');
  const regex = /(\w+)=([^,)]+)/g;
  let match;
  const user = {};
  while ((match = regex.exec(trimmedStr)) !== null) {
    const key = match[1];
    const value = match[2];
    user[key] = value;
  }
  store.id = user.id;
  store.name = user.name;
}

const goBack = () => {
  router.go(-1);
}
const getData = () => {
  axios.get(`http://localhost:10000/passenger-trip/mytrip/check?passengerId=${store.id}`)
      .then(res => {
        TripData.value = res.data;
        // console.log(TripData.value);
        //      console.log(TripData.value[0].status);
        for (let i in TripData.value) {
          if (TripData.value[i].status === "待接受" ? true : (
              TripData.value[i].status === "已完成" ? true : false
          )) {
            TripData.value[i].accepted = false;
            if (TripData.value[i].adcVehicleTrip === null)
              TripData.value[i].adcVehicleTrip.num_passengers = "无";
          } else {
            TripData.value[i].accepted = true;
          }
        }
      })
}
</script>
<style scoped>
.MyTrip {
  overflow: scroll;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.content {
  width: 100%;
  height: 100%;
}

.nav {
  background-color: rgb(189, 220, 255);
  height: 10%;
  width: 100%;
}

.main {
  height: 90%;
  width: 100%;
  overflow-y: scroll;
}

.main .el-card {
  height: 30%;
  width: 90%;
  margin: auto;
  margin-top: 1%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow:auto;
}
.main .el-card:hover{
  overflow:auto;
}

.main .el-card div {
  margin: 1%;
}
.main tr{
  height:auto;
}
.accepted {
  color: red;
}

.trip-status {
  color: green;
}

.el-descriptions {
  margin:0% !important;
  height:100% !important;
  margin-left:10% !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size:10%
}

</style>
<style>
.nav-page .el-divider {
  border: 0;
  height: 100%;
}

.nav-page {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-page span,
.nav-page .el-page-header__header,
.nav-page .el-page-header__left,
.nav-page .el-page-header__back,
.nav-page .el-page-header__content {
  height: 100%;
  font-size: 100% !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.card-body{
  width:100% !important;
  height:100% !important;
  padding:0;
  margin:0;

}
.des-content>:first-child{
  width:100%;
  height:80%;
}
</style>